<template>
    <view :style="{ '--color': color }" class="p-bot150">
        <statusBar ref="statusbar" title="会员中心" :back="vipId"></statusBar>

        <view class="Vipoptions" v-if="pageData && pageData.length > 1">
            <u-tabs
                :list="pageData"
                :current="current"
                :lineColor="color"
                :itemStyle="itemStyle"
                :lineWidth="24"
                :activeStyle="activeStyle"
                :inactiveStyle="inactiveStyle"
                :scrollable="true"
                keyName="vip_name"
                @click="click"
            ></u-tabs>
        </view>

        <view class="rows m-top20" v-if="pageData.length">
            <view class="rows" v-for="(item, index) in pageData" :key="index">
                <u-parse :content="pageData[current].content" :domain="imgUrl" @ready="Load = false" v-if="current == index"></u-parse>
            </view>

            <!-- <view class="rows" v-if="current == 0">
				<u-parse :content="pageData[0].content" :domain="imgUrl" @ready="Load = false"></u-parse>
			</view>
			<view class="rows" v-if="current == 1">
				<u-parse :content="pageData[1].content" :domain="imgUrl"></u-parse>
			</view> -->
        </view>

        <view class="footerBox">
            <view class="row a-center j-centert m-bot20">
                <text class="color_66 size28 m-right10">推荐码:</text>
                <input type="text" v-model="invitation" class="invitation" placeholder="请输入推荐" />
            </view>
            <view class="entinBi" @click="ageree = !ageree" v-if="pageData[current].status == 1">
                <view class="selctBox" :class="{ Active: ageree }">
                    <view class="iconfont icon-xuanzhong white size28"></view>
                </view>
                <view class="d-flex a-center">
                    <text class="color_99 size26">阅读并同意</text>
                    <block v-for="(item, index) in instructions" :key="index">
                        <text class="color_33 size26" @click.stop="toUrl(`/Reserve/article?id=${item.id}`)">{{ item.title }}</text>
                    </block>
                </view>
            </view>
            <view class="liberal_View">
                <button open-type="getPhoneNumber" class="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="ageree && !v_tel"></button>
                <!-- v-if="v_tel" -->
                <view class="liberal" :class="{ noActive: pageData[current].status == 0 }" @click="playVip">
                    <view class="d-flex f-column a-center" v-if="is_buy">
                        <view class="d-flex a-center white size26">
                            <view class="d-flex a-center">
                                <text v-if="pageData[current].status == 1">立即续费</text>
                                <text>{{ liberal_Txt }}</text>
                            </view>

                            <text class="h6 m-top4">￥</text>
                            <text class="size28">{{ liberal_price }}</text>
                        </view>
                        <view class="d-flex a-center">
                            <text class="white h7 m-right10" v-if="pageData[current].status == 1">有效期至</text>
                            <text class="white h7">{{ pageData[current].expire_at }}</text>
                        </view>
                    </view>
                    <block v-else>
                        <text class="size34">{{ liberal_Txt }}</text>
                        <text class="h6 m-top4">￥</text>
                        <text class="size34">{{ liberal_price }}</text>
                    </block>
                </view>
            </view>
        </view>

        <tabBar :tab="16" v-if="!vipId"></tabBar>
        <showModel @cancelFunc="cancelFunc" goHome="0" v-if="showModal" type="2"></showModel>

        <u-popup :show="show" @close="show = false" round="10" closeable>
            <view class="Warpper">
                <text class="title">支付方式</text>
                <view class="Box">
                    <view class="list" :class="{ active: pay_type == 1 }" @click="pay_type = 1">
                        <view class="iconfont icon-weixin color_16d size80"></view>
                        <text class="color_33 size30">微信支付</text>
                    </view>
                    <view class="list" :class="{ active: pay_type == 2 }" @click="pay_type = 2">
                        <view class="iconfont icon-a-016 color_33 size80"></view>
                        <text class="color_33 size30">余额支付</text>
                    </view>
                </view>

                <view class="Continue" :class="{ conActive: pay_type != 0 }" @click="playVip">支付</view>
            </view>
        </u-popup>
        <!-- 	<Load v-if="Load"></Load> -->
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import statusBar from '@/components/status-bar/status-bar.vue';
    import Api from '@/common/Api.js';
    export default {
        components: {
            statusBar
        },
        data() {
            return {
                Load: true,
                showModal: false,
                imgUrl: this.imgUrl,
                list1: [
                    {
                        name: '月卡会员'
                    },
                    {
                        name: '年卡会员'
                    }
                ],
                current: 0,
                itemStyle: {
                    height: '36px'
                },
                activeStyle: {
                    fontWeight: 'bold',
                    fontSize: '30rpx',
                    transform: 'scale(1.04)'
                },
                inactiveStyle: {
                    transform: 'scale(1)',
                    fontSize: '30rpx'
                },

                pageData: [],
                palyState: true,
                show: false,
                pay_type: 1, //1 微信支付 2余额支付
                vipId: '',
                ageree: false,
                instructions: [],
                invitation: '',
                v_tel: ''
            };
        },
        onLoad(opt) {
            this.activeStyle['color'] = this.color;
            if (opt.vipId) this.vipId = opt.vipId;
        },
        onShow() {
            this.buyVipList();
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') {
                    this.buyVipList();
                }
            }
        },
        methods: {
            buyVipList() {
                this.$http
                    .get({
                        url: '/goodsLessonsApi/buyVipList',
                        data: {
                            vipId: this.vipId
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        if (res.v_tel) this.v_tel = res.v_tel;

                        this.pageData = result;
                        this.instructions = res.instructions || [];
                    });
            },
            click(e) {
                this.current = e.index;
                this.ageree = false;
            },
            payBtn() {
                if (!this.vid) return (this.showModal = true);
                this.show = true;
            },
            playVip() {
                let that = this;
                if (!that.vid) return (that.showModal = true);
                if (!that.palyState) return;
                if (this.pageData[this.current].status == 0) return;
                if (!this.ageree && this.pageData[this.current].status == 1) return this.$Toast('未同意会员须知协议');

                this.show = false;
                this.getVipPayInfo();
            },
            getVipPayInfo() {
                this.palyState = false;
                this.$http
                    .get({
                        url: '/accountPay/getVipPayInfo',
                        data: {
                            vip_id: this.pageData[this.current].vip_id,
                            pay_type: this.pay_type,
                            invitation: this.invitation
                        }
                    })
                    .then((res) => {
                        this.palyState = true;
                        if (res.code != '100') return this.$Toast(res.msg);
                        const result = res.data;
                        if (this.pay_type == 2) return this.buyVipList();
                        if (result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: result.appId,
                                extraData: result.extraData
                            });
                        } else {
                            this.$pop.getPayment(result).then((pay) => {
                                this.buyVipList();
                            });
                        }
                    });
            },

            async getPhoneNumber(e) {
                let result = e.detail;
                console.log(result, 'result');
                if (result.errMsg != 'getPhoneNumber:ok') return;
                const jscode = await this.getProvider();
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/appletDecodePhone',
                        data: {
                            encryptedData: result.encryptedData,
                            iv: result.iv,
                            session_key: this.session_key,
                            js_code: jscode
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        Api.savePurePhoneNumber(res.data).then((Result) => {
                            this.getVipPayInfo();
                        });
                    });
            },

            getProvider() {
                return new Promise((resolve, reject) => {
                    uni.getProvider({
                        service: 'oauth',
                        success: (res) => {
                            uni.login({
                                provider: res.provider[0],
                                success: (req) => {
                                    resolve(req.code);
                                }
                            });
                        }
                    });
                });
            },
            cancelFunc() {
                this.showModal = false;
                this.buyVipList();
            }
        },
        computed: {
            ...mapState(['color', 'share', 'vid', 'session_key']),
            liberal_Txt() {
                if (!this.pageData.length) return;
                return `${this.pageData[this.current].vip_name}：`;
            },
            liberal_price() {
                if (!this.pageData.length) return;
                return `${this.pageData[this.current].vip_price}`;
            },
            is_buy() {
                if (!this.pageData.length) return;
                return this.pageData[this.current].is_buy == 1 ? true : false;
            }
        },
        onShareAppMessage() {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}`,
                imageUrl: share.imageUrl
            };
        }
    };
</script>
<style lang="scss">
    page {
        background-color: #f7f7f7;
    }
</style>
<style lang="scss" scoped>
    .Warpper {
        width: 100%;
        padding: 40rpx 40rpx 80rpx 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            color: #000;
            font-size: 36rpx;
            font-weight: bold;
        }

        .Box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 40rpx;

            .list {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 30rpx 40rpx;
                border: 1px solid #f2f2f2;
                border-radius: 10rpx;
            }

            .active {
                border: 1px solid var(--color) !important;
            }
        }

        .Continue {
            width: 540rpx;
            height: 88rpx;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 34rpx;
            border-radius: 10rpx;
            margin-top: 80rpx;
        }

        .conActive {
            background-color: var(--color);
        }
    }

    .Vipoptions {
        width: 710rpx;
        margin: 0 auto;
        height: 80rpx;
    }
    .footerBox {
        width: 100%;
        // position: fixed;
        // background-color: #f7f7f7;
        // background-color: #ffffff;
        // left: 0;
        // bottom: 100rpx;
        z-index: 100;
        padding-top: 50rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 100rpx;
    }
    .invitation {
        width: 400rpx;
        height: 70rpx;
        border: 1px solid #ccc;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #000;
        border-radius: 10rpx;
    }
    .liberal_View {
        width: 100%;
        z-index: 100;
        display: flex;
        justify-content: center;
        position: relative;
        // width: 100%;
        // position: fixed;
        // left: 0;
        // bottom: 150rpx;
        // z-index: 100;
        // display: flex;
        // justify-content: center;
        // padding-bottom: constant(safe-area-inset-bottom);
        // padding-bottom: env(safe-area-inset-bottom);
    }
    .getPhoneNumber {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        background-color: transparent;
        border: none;
    }

    .liberal {
        width: 600rpx;
        height: 80rpx;
        border-radius: 40rpx;
        overflow: hidden;
        background-color: var(--color);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .noActive {
        background-color: #ccc !important;
        color: #999 !important;
    }
    .entinBi {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .selctBox {
            width: 36rpx;
            height: 36rpx;
            border: 1px solid #999;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 20rpx;
        }
        .Active {
            background-color: var(--color);
            border: 1px solid var(--color);
        }
    }

    // #ifdef MP-WEIXIN
    .liberal {
        bottom: 40rpx;
    }

    // #endif
    // #ifdef H5
    .liberal {
        bottom: 140rpx;
    }

    // #endif
</style>
